<!--
 * @Author: hq
 * @Date: 2022-06-06 17:23:20
 * @LastEditors: hq
 * @LastEditTime: 2022-06-20 19:04:46
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="echart" id="mychart"></div>
  </div>
</template>

<script>
import { next_data } from "@/api/member";
import * as echarts from "echarts";
export default {
  props: ["rowData"],
  data() {
    return {
      nextData: {
        name: "1111",
        children: [
          {
            name: "display",
            children: [],
          },
          {
            name: "flex",
            children: [{ name: "FlareVis", value: 4116 }],
          },
          {
            name: "query",
            children: [],
          },
        ],
      },
    };
  },
  methods: {
    async next_data() {
      const { data, err } = await next_data({
        uid: this.rowData.id,
      });
      if (err === 0) {
        this.nextData.children = data;
        console.log(this.nextData);
        this.$nextTick(() => {
          this.initEcharts();
        });
      }
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        grid: {
          left: "5%",
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: [this.nextData],
            top: "10%",
            left: "8%",
            bottom: "22%",
            right: "20%",
            symbolSize: 7,
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            lineStyle: {
              width: 2,
            },
            label: {
              backgroundColor: "#fff",
              position: "left",
              verticalAlign: "middle",
              align: "right",
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  mounted() {},
  created() {
    this.nextData.name = this.rowData.nickname;
    this.next_data();
  },
};
</script>

<style lang="scss" scoped>
.echart {
  width: 100%;
  min-height: 400px;
}
</style>
